<template>
    <div class="finishin container">
            <el-card class="box-card">
                <div class="clearfix">
                <span style="font-size:22px;">完成测试详情</span>
                <el-button id="add_group" style="float: right;" type="primary" @click="back">返回</el-button>
                </div>
            </el-card>
            <!-- 内容 -->
            <el-card class="box-card">
            <div slot="header" class="clearfix" v-if="testanswer[0]">
                <span>姓名：{{testanswer[0].name}}</span>
                <span>年龄：{{testanswer[0].data.age}}</span>
                <span>手机号：{{testanswer[0].phonenum}}</span>
            </div>
            <div class="inner">
                <div class="top">
                    <span style="margin-right:30px;">测试题:</span>
                    <el-tag
                    v-for="(tag,index) in test"
                    :key="tag.ID"
                    @click="handleChange(index)"
                    :effect="flag==index?'plain':'dark'"
                    >{{tag.ID}}
                    </el-tag>
                </div>
                <div class="bottom" style="padding-left:76px;" v-if="test[flag]">
                    <el-radio-group v-model="labelPosition" size="small">
                    </el-radio-group>
                    <div style="margin: 20px;"></div>
                    <el-form :label-position="labelPosition" label-width="80px">
                    <el-form-item label="题型：">
                        <span>{{test[flag].type}}</span>
                    </el-form-item>
                    <el-form-item label="名称：">
                        <span>{{test[flag].name}}</span>
                    </el-form-item>
                    <el-form-item label="内容：">
                        <el-input type="textarea" v-html="test[flag].text"></el-input>
                    </el-form-item>
                    <el-form-item label="学生答案：">
                        <span>{{testanswer[0].data.data[flag].key}}</span>
                    </el-form-item>
                    <el-form-item label="正确答案：">
                        <span v-if="test[flag].type=='填空'">{{test[flag].data.填空}}</span>
                        <span v-if="test[flag].type=='单选'">{{test[flag].data.answer}}</span>
                        <span v-if="test[flag].type=='多选'">{{test[flag].data.answer}}</span>
                        <span v-if="test[flag].type=='解答'"></span>
                    </el-form-item>
                    <el-form-item label="解析：">
                        <span>{{test[flag].analysis}}</span>
                    </el-form-item>
                    <el-form-item label="知识点：">
                        <span>{{test[flag].knowledgepoints}}</span>
                    </el-form-item>
                    <el-form-item label="标签：">
                        <span>{{test[flag].tags}}</span>
                    </el-form-item>
                    </el-form>
                </div>
            </div>
            </el-card>
    </div>
</template>
 
<script>
import {
  asyncselecttestanswer,
  asyncselectteachertextitembank
} from "../../../plugins/api";
export default {
  data() {
    return {
      labelPosition: "right",
      testanswer: [],
      test: [],
      flag: 0
    };
  },
  props: ['ID'],
  watch:{
      async ID(){
          this.flag=0
        this.testanswer = await asyncselecttestanswer();
        var arr = await asyncselectteachertextitembank();
        this.test = arr.find(
        item => item.ID == this.ID
        ).data;
        this.testanswer=this.testanswer.filter(item=>item.teachertextitembankid==this.$route.params.ID)
      }
  },
  methods: {
    back() {
      this.$router.push('/finishin');
    },
    handleChange(index) {
      this.flag = index;
      console.log(this.test[this.flag]);
    }
  },
  async created() {
    this.testanswer = await asyncselecttestanswer();
    var arr = await asyncselectteachertextitembank();
        this.test = arr.find(
        item => item.ID == this.ID
        ).data;
    this.testanswer=this.testanswer.filter(item=>item.teachertextitembankid==this.$route.params.ID)
    
    console.log(this.test)
    console.log(this.$route.query.row)
    this.testanswer[0]=this.$route.query.row
    console.log(this.testanswer)
  }
};
</script>

<style scoped>
.clearfix span{
    margin-right: 25px !important;
}
p i{
    display: flex;
    justify-content: right;
    width:100px;
    height: 30px;
    display: inline-block;
    justify-content: right;
    font-style: normal;
    position: relative;
    right: 0;
}
p span{
    width: 500px;
}
.el-form-item{
    margin-bottom:0;
}
.top .el-tag{
    margin:0 3px;
    padding:0 18px !important;
}
.el-textarea{
    border:1px solid #e8e8e8;
    padding:0 3px;
    width: 300px;
}

</style>